<template>
	<div class="user_analysis">
		<h1>用户分析</h1>
		<div class="content">
			<el-tabs v-model="activeName1">
				<el-tab-pane label="用户增长" name="1">
					<div class="user_increase">
						<h6>
							<img src="../../../assets/images/manage/statistics/explain.png" alt="">
							<span>本页根据昨日数据来计算，而用户管理页根据当前数据计算，两者不一致。</span>
						</h6>
						<div class="yesterday_data">
							<div class="title">
								<p>昨日关键指标</p>
								<img src="../../../assets/images/manage/statistics/helps.png" alt="">
							</div>
							<div class="people_numbers">
								<div class="people_number">
									<h6>新关注人数</h6>
									<span>0</span>
									<p>日&nbsp;&nbsp;--</p>
									<p>周&nbsp;&nbsp;--</p>
									<p>月&nbsp;&nbsp;--</p>
								</div>
								<div class="people_number">
									<h6>取消关注人数</h6>
									<span>0</span>
									<p>日&nbsp;&nbsp;--</p>
									<p>周&nbsp;&nbsp;--</p>
									<p>月&nbsp;&nbsp;--</p>
								</div>
								<div class="people_number">
									<h6>净增关注人数</h6>
									<span>0</span>
									<p>日&nbsp;&nbsp;--</p>
									<p>周&nbsp;&nbsp;--</p>
									<p>月&nbsp;&nbsp;--</p>
								</div>
								<div class="people_number">
									<h6>累积关注人数</h6>
									<span>0</span>
									<p>日&nbsp;&nbsp;--</p>
									<p>周&nbsp;&nbsp;--</p>
									<p>月&nbsp;&nbsp;--</p>
								</div>
							</div>
						</div>
						<el-tabs v-model="activeName2" type="card" @tab-click="handleClick2">
							<el-tab-pane label="新增人数" name="1">
								<div class="newadd_numbers">
									<div class="conditions1">
										<div class="condition1">
											<el-select v-model="value1" style="width:120px;">
												<el-option
													v-for="item in options1"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
											<el-date-picker
												style="width:280px;"
												v-model="value2"
												type="daterange"
												align="right"
												unlink-panels
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												:picker-options="pickerOptions2">
											</el-date-picker>
											<el-select v-model="value3" style="width:130px;">
												<el-option
													v-for="item in options3"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</div>
										<button>按时间对比</button>
									</div>
									<x-chart :id="id" :option="option"></x-chart>
								</div>
							</el-tab-pane>
							<el-tab-pane label="取消关注人数" name="2">
								<div class="newadd_numbers">
									<div class="conditions1">
										<div class="condition1">
											<el-select v-model="value1" style="width:120px;">
												<el-option
													v-for="item in options1"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
											<el-date-picker
												style="width:280px;"
												v-model="value2"
												type="daterange"
												align="right"
												unlink-panels
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												:picker-options="pickerOptions2">
											</el-date-picker>
										</div>
										<button>按时间对比</button>
									</div>
									<x-chart :id="id" :option="option"></x-chart>
								</div>
							</el-tab-pane>
							<el-tab-pane label="净增人数" name="3">
								<div class="newadd_numbers">
									<div class="conditions1">
										<div class="condition1">
											<el-select v-model="value1" style="width:120px;">
												<el-option
													v-for="item in options1"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
											<el-date-picker
												style="width:280px;"
												v-model="value2"
												type="daterange"
												align="right"
												unlink-panels
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												:picker-options="pickerOptions2">
											</el-date-picker>
										</div>
										<button>按时间对比</button>
									</div>
									<x-chart :id="id" :option="option"></x-chart>
								</div>
							</el-tab-pane>
							<el-tab-pane label="累积人数" name="4">
								<div class="newadd_numbers">
									<div class="conditions1">
										<div class="condition1">
											<el-select v-model="value1" style="width:120px;">
												<el-option
													v-for="item in options1"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
											<el-date-picker
												style="width:280px;"
												v-model="value2"
												type="daterange"
												align="right"
												unlink-panels
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												:picker-options="pickerOptions2">
											</el-date-picker>
										</div>
										<button>按时间对比</button>
									</div>
									<x-chart :id="id" :option="option"></x-chart>
								</div>
							</el-tab-pane>
						</el-tabs>
						<div class="table_info">
							<div class="table_top">
								<el-date-picker
									style="width:280px;"
									v-model="value4"
									type="daterange"
									align="right"
									unlink-panels
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									:picker-options="pickerOptions4">
								</el-date-picker>
								<div class="table_top_r">
									<p>下载表格</p>
									<i class="el-icon-question" style="color:#c3c3c3;"></i>
								</div>
							</div>
							<div class="table_datas" style="text-align:center;padding-bottom:50px;">
								<el-table
									:data="tableData"
									style="width: 100%"
									:default-sort = "{prop: 'date', order: 'descending'}"
								>
									<el-table-column
										prop="date"
										label="时间"
										sortable
										width="180">
									</el-table-column>
									<el-table-column
										prop="sum1"
										label="新关注人数"
										sortable
										width="180">
									</el-table-column>
									<el-table-column
										prop="sum2"
										label="取消关注人数"
										sortable>
									</el-table-column>
									<el-table-column
										prop="sum3"
										label="净增关注人数"
										sortable
										width="180">
									</el-table-column>
									<el-table-column
										prop="sum4"
										label="累计关注人数"
										sortable
										width="180">
									</el-table-column>
								</el-table>
								<el-pagination
									style="margin-top:30px;"
									background
									@size-change="handleSizeChange1"
									@current-change="handleCurrentChange1"
									:current-page="page1"
									:page-sizes="[100, 200, 300, 400]"
									:page-size="pageSize1"
									layout="total, sizes, prev, pager, next, jumper"
									:total="400">
								</el-pagination>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="用户属性" name="2">

				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import XChart from '@/page/abApplication/statistics/charts'
	import options from '@/assets/js/charts'
	export default {
		name: 'user_analysis',
		data() {
			let option = options.bar
			return {
				id: 'test',
				option: option,
				showData: true,
				activeName1: '1',
				activeName2: '1',
				value1: '最近30天',
				options1: [{
					value: '选项1',
					label: '最近7天'
				}, {
					value: '选项2',
					label: '最近15天'
				}, {
					value: '选项3',
					label: '最近30天'
				}],
				value2: '',
				pickerOptions2: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value3: '全部来源',
				options3: [{
					value: '选项1',
					label: '全部来源'
				}, {
					value: '选项2',
					label: '公众号搜索'
				}, {
					value: '选项3',
					label: '扫描二维码'
				}],
				value4: '',
				pickerOptions4: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				tableData: [{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				}, {
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},{
					date: '2016-05-02',
					sum1: 2,
					sum2: 3,
					sum3: 4,
					sum4: 2
				},],
				page1: 1,
				pageSize1: 6,
			}
		},
		components: {
			XChart
		},
		computed: {

		},
		created() {

		},
		methods: {
			handleClick2(){
				options.bar.series[0].data.push(2,34,32);return
				if(this.activeName2 === '1'){
					options.bar.series[0].data = [100,100,100,100];
					options.bar.series[0].name = '新关注人数-全部1';
				}else if(this.activeName2 === '2'){
					options.bar.series[0].data = [200,200,200,200];
					options.bar.series[0].name = '新关注人数-全部2';
				}else if(this.activeName2 === '3'){
					options.bar.series[0].data = [300,300,300,300];
					options.bar.series[0].name = '新关注人数-全部3';
				}else if(this.activeName2 === '4'){
					options.bar.series[0].data = [100,200,300,200];
					options.bar.series[0].name = '新关注人数-全部4';
				}
				console.log(options.bar.series[0]);
			},
			handleSizeChange1(val){
				this.pageSize1 = val;
			},
			handleCurrentChange1(val){
				this.page1 = val;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.user_analysis {
		text-align: left;
		>h1{
			font-size: 28px;
			color: #363636;
			font-weight: 500;
			padding: 38px 0 20px 72px;
		}
		.content {
			.user_increase{
				width: 92%;
				margin: 40px auto 0 auto;
				>h6{
					display: flex;
					align-items: center;
					span{
						font-size: 15px;
						color: #404044;
						font-weight: 400;
						margin-left: 5px;
					}
				}
				.yesterday_data{
					height: 226px;
					border: 1px solid #ebebee;
					margin: 30px 0 20px 0;
					.title{
						height: 40px;
						background: #f4f5f9;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 21px;
						p{
							font-size: 15px;
							color: #5f575f;
						}
					}
					.people_numbers{
						height: 186px;
						display: flex;
						align-items: center;
						text-align: center;
						.people_number{
							width: 25%;
							height: 138px;
							color: #515051;
							border-right: 1px solid #ebebee;
							h6{
								font-size: 15px;
								font-weight: 400;
							}
							span{
								display: block;
								font-size: 25px;
								margin: 8px 0 15px 0;
							}
							p{
								font-size: 14px;
							}
						}
						.people_number:last-of-type{
							border-right: none;
						}
					}
				}
				.newadd_numbers{
					border: 1px solid #e7e7eb;
					.conditions1{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 14px;
						background: #f4f5f9;
						.condition1{
							display: flex;
						}
						>button{
							width: 116px;
							height: 32px;
							line-height: 32px;
							background: #44b549;
							font-size: 15px;
							color: #fff;
							border-radius: 5px;
						}
					}
				}
				.table_info{
					.table_top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: #f4f5f9;
						padding: 0 15px 0 10px;
						margin-top: 20px;
						.table_top_r{
							display: flex;
							align-items: center;
							p{
								width: 96px;
								font-size: 15px;
								color: #576b95;
								cursor: pointer;
								&:hover{
									text-decoration: underline;
								}
							}
						}
					}
				}
			}
		}
	}
</style>